import React, { useState } from 'react';
import { Form, Button, Radio } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { If } from 'babel-plugin-jsx-control-statements';
import { useHistory } from 'react-router-dom';
import qs from 'qs';
import ProcessRecord from '@/components/process-record';
import Collapse from '@/components/collapse';
import UserInfo from '@/components/user-check/userInfo';
import ParkingLotInfo from '@/components/user-check/parkingLotInfo';
import ParkingLotExtraInfo from '@/components/user-check/parkingLotExtraInfo';
import FileExtraInfo from '@/components/user-check/fileExtraInfo';
import css from './index.scss';

const BaseMsg = () => {
	const [form] = Form.useForm();
	const history = useHistory();
	const close = () => {
		console.log('close');
		history.goBack(-1);
	};
	return (
		<Form name="form" form={form} layout="vertical">
			<Collapse
				form1={<UserInfo />}
				form2={<ParkingLotInfo />}
				form3={<ParkingLotExtraInfo />}
				form4={<FileExtraInfo />}
			/>
			<Form.Item wrapperCol={{ offset: 8, span: 16 }} className={css.submit}>
				<Button type="primary" id="isSubmit" onClick={close}>
					关闭
				</Button>
			</Form.Item>
		</Form>
	);
};
const Process = () => {
	return <ProcessRecord />;
};
export default () => {
	const history = useHistory();
	const search = qs.parse(history.location.search, { ignoreQueryPrefix: true });
	const { value } = search;
	const [values, setValues] = useState(value);
	const handleModeChange = (e) => {
		setValues(e.target.values);
	};
	const back = () => {
		history.goBack(-1);
	};
	return (
		<div className={css.app}>
			<div className={css.header}>
				<h1 style={{ padding: '5px 0' }}>
					<Button type="link" style={{ color: 'black' }} onClick={back}>
						<ArrowLeftOutlined />
					</Button>
					<span>信息详情</span>
				</h1>
				<Radio.Group onChange={handleModeChange} value={value} style={{ marginBottom: 8 }}>
					<Radio.Button values="1">基本信息</Radio.Button>
					<Radio.Button values="2">流程覆历</Radio.Button>
				</Radio.Group>
			</div>
			<div className={css.content}>
				<If condition={values === '1'}>
					<BaseMsg />
				</If>
				<If condition={values === '2'}>
					<Process />
				</If>
			</div>
		</div>
	);
};
